import { Ionicons } from '@expo/vector-icons';
import { View, Text, ScrollView, TouchableOpacity, Image } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function ProfileScreen() {
  return (
    <SafeAreaView className="flex-1 bg-gray-50">
      <ScrollView className="flex-1">
        {/* 用户信息卡片 */}
        <View className="bg-white p-6 mb-4">
          <View className="flex-row items-center">
            <View className="w-20 h-20 bg-gray-200 rounded-full items-center justify-center mr-4">
              <Ionicons name="person" size={40} color="#6b7280" />
            </View>
            <View>
              <Text className="text-xl font-bold text-gray-800">用户名</Text>
              <Text className="text-sm text-gray-500 mt-1">ID: 123456</Text>
            </View>
          </View>
        </View>

        {/* 功能菜单 */}
        <View className="bg-white mb-4">
          <TouchableOpacity className="flex-row items-center p-4 border-b border-gray-100">
            <View className="w-8 h-8 bg-blue-100 rounded-full items-center justify-center mr-3">
              <Ionicons name="settings" size={20} color="#3b82f6" />
            </View>
            <Text className="text-base text-gray-800">设置</Text>
            <View className="flex-1" />
            <Ionicons name="chevron-forward" size={20} color="#9ca3af" />
          </TouchableOpacity>

          <TouchableOpacity className="flex-row items-center p-4 border-b border-gray-100">
            <View className="w-8 h-8 bg-green-100 rounded-full items-center justify-center mr-3">
              <Ionicons name="wallet" size={20} color="#10b981" />
            </View>
            <Text className="text-base text-gray-800">我的钱包</Text>
            <View className="flex-1" />
            <Ionicons name="chevron-forward" size={20} color="#9ca3af" />
          </TouchableOpacity>

          <TouchableOpacity className="flex-row items-center p-4 border-b border-gray-100">
            <View className="w-8 h-8 bg-purple-100 rounded-full items-center justify-center mr-3">
              <Ionicons name="help-circle" size={20} color="#8b5cf6" />
            </View>
            <Text className="text-base text-gray-800">帮助与反馈</Text>
            <View className="flex-1" />
            <Ionicons name="chevron-forward" size={20} color="#9ca3af" />
          </TouchableOpacity>

          <TouchableOpacity className="flex-row items-center p-4">
            <View className="w-8 h-8 bg-red-100 rounded-full items-center justify-center mr-3">
              <Ionicons name="information-circle" size={20} color="#ef4444" />
            </View>
            <Text className="text-base text-gray-800">关于我们</Text>
            <View className="flex-1" />
            <Ionicons name="chevron-forward" size={20} color="#9ca3af" />
          </TouchableOpacity>
        </View>

        {/* 退出登录按钮 */}
        <TouchableOpacity className="mx-4 mb-8 bg-white rounded-xl p-4 items-center shadow-sm">
          <Text className="text-red-500 font-semibold">退出登录</Text>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
}
